<template>
  <div class="glass-box">
    <span>{{ props.title }} </span>
    <draggable
      class="list-group large-plus"
      v-model="data.list"
      v-bind="data.dragOptions"
      @add="data.add"
      @remove="data.remove"
      @start="data.start"
      @end="data.end"
      @moved="data.moved"
      item-key="order"
    >
      <template #item="{ element }" class="list-group-item">
        <AppIcon
          :icon="element.icon"
          :web-name="element.webName"
          :web-url="element.webUrl"
        ></AppIcon>
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import draggable from 'vuedraggable'
import AppIcon from '../../AppIcon.vue'
const props = defineProps({
  title: {
    default: '默认标题',
  },
})

// debugger
const data = reactive({
  start: () => {
    data.drag = true
    console.log('start')
  },
  end: (value) => {
    data.drag = false
    console.log('end', value)
  },
  add(value) {
    console.log(value)

    console.log('添加了', value.item._underlying_vm_)
  },
  remove(value) {
    console.log('移除了', value.item._underlying_vm_)
  },
  drag: false,
  list: [],
  dragOptions: {
    animation: 500,
    group: 'description',
  },
  isColumn: false,
})
watch(
  data.list,
  function (newList) {
    console.log('毛玻璃', newList)
  },
  {
    deep: true,
  }
)
defineExpose({
  list: data.list,
})
</script>

<style scoped>
.glass-box {
  display: inline-block;
  padding: 5px;
  border: 1px dashed;

  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.1);
}
.list-group {
  display: grid;
  overflow: hidden;
}

.mini {
  height: 120px;
  grid-template-columns: repeat(2, 60px);
  grid-template-rows: repeat(2, 60px);
}

.middle {
  height: 180px;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(3, 60px);
}
.large {
  height: 240px;
  grid-template-rows: repeat(4, 60px);
  grid-template-columns: repeat(3, 60px);
}

.large-plus {
  height: 480px;
  grid-template-rows: repeat(4, 60px);
  grid-template-columns: repeat(3, 60px);
}
</style>
